<template>
  <div class="setting">
    <h3><i class="el-icon-back" @click="back"></i>&ensp;{{name}}</h3>
    <el-form ref="form" :model="form" label-width="100px">
      <div v-if="sqltype=='hive'">
        <!-- <el-form-item label="抽取方式">
           <el-radio-group v-model="form.isIncrement">
            <el-radio  label="1">全部抽取</el-radio>
            <el-radio label="0">增量抽取</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否分区">
           <el-radio-group v-model="form.isIncrement">
            <el-radio  label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item> -->
     
    
    <el-form-item label="新增表名称">
        <el-input type="text"  v-model="form.name" :disabled="true"  ></el-input>
    </el-form-item>
    <el-form-item label="分区选择" v-if="isselect">
        <el-select v-model="form.dt" multiple placeholder="请选择" style="width:100%">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="数据添加">
        <el-transfer
        filterable
        class="transfer"
        :titles="['原始表', '新建表']"
        :filter-method="filterMethod"
        filter-placeholder="请输入字段(可按类型搜索)"
        v-model="form.list"
        :data="data2">
      </el-transfer>
    </el-form-item>
    
    <!-- <div class="addTime">
        设置定时:<a >添加</a>
        <el-checkbox v-model="checked" class="isdisabled">禁用</el-checkbox>
      </div> -->
    <!-- <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="frequency"
        label="任务频率"
        width="120">
      </el-table-column>
      <el-table-column
        prop="date"
        label="任务日期"
        width="120"
        >
      </el-table-column>
      <el-table-column
        prop="datetime"
        label="任务时间"
        width="120"
        >
      </el-table-column>
      <el-table-column
        prop="starttime"
        label="开始时间"
        width="120"
        >
      </el-table-column>
      <el-table-column
        prop="endtime"
        label="终止日期"
        width="120"
        >
      </el-table-column>
      <el-table-column
        label="操作"
        >
        <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
      </el-table-column>
    </el-table> -->
    <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
    </div>
    </el-form>
     
  </div>
</template>

<script>
export default {
  name: 'DecSetting',
   data () {

     const generateData2 = _ => {
        const data = [];
        const cities = ['filed_001 string', 'filed_002 bigint', 'filed_003 decimal(10,4)', 'filed_004 int', 'filed_005 string', 'filed_006 string', 'filed_007 string'];
        const pinyin = ['string', 'bigint', 'decimal(10,4)', 'int', 'string', 'string', 'string'];
        cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index,
            pinyin: pinyin[index]
          });
        });
        return data;
      };
        return {
          sqltype:"",
          isselect:false,
          data2: generateData2(),
          options:[
            {
              label:"20180820",
              value:"20180820"
            },
            {
              label:"20180821",
              value:"20180821"
            },
            {
              label:"20180822",
              value:"20180822"
            },
            {
              label:"20180823",
              value:"20180823"
            },
          ],
          form:{
            radio:'',
            list:[],
            select:"",
            name:'',
            dt:""
          },
          filterMethod(query, item) {
          return item.pinyin.indexOf(query) > -1;
        },
            name:"",
            radio:"1",
            value:"覆盖",
            tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
    },
    mounted(){
      this.sqltype=this.$store.state.formType.conType;
        console.log(this.$store.state.formType.conType);
        if(this.$route.query.row.state=="是"){
          this.isselect=true;
        }
        this.name=this.$route.query.row.name;
        this.form.name='tmp__'+this.name
    },
   
    methods:{
       
        back(){
          this.$store.commit('changetab',{isSuccess:true,tabindex:1});
          this.$router.push({path:"/datalink/baselink/"+this.$store.state.formType.conType,query:{sqlType:this.$store.state.formType.conType,sqlId:this.$store.state.formType.id}})
        },
        onSubmit(){

        }
    }
}
</script>

<style scoped>
a{
    display: inline-block;
    text-decoration: none;
    color: blue;
}
.isdisabled{
   float: right;
}
.setting form{
  width: 80%;
}
.transfer .el-transfer-panel{
  width: 300px!important;
}
</style>